<template>
  <div class="box" style="letter-spacing: 0.0125rem">
    <ul>
      <li v-for="(item, index) in auditBlog" :key="index">
        <!-- 文章封面 如果有图片显示，没有则隐藏 -->
        <a href="JavaScript:;" v-if="item.display">
          <img :src="item.article_picture" alt="" />
        </a>
        <div>
          <!-- 文章标题 -->
          <p class="title">{{ item.article_title }}</p>
          <!-- 文章发布时间 -->
          <span class="time">{{ timeDetal(item.article_createtime) }}</span>
          <span class="audit">待审核 </span>
          <!-- 文章发布类型 转载or原创 -->
          <span class="type">{{ item.original_or_reprint }}</span>
          <!-- 总阅读量、总评论量、总收藏量 -->
          <p class="read">
            阅读 {{ item.article_view_count }} • 评论{{
              item.article_comment_count
            }}
            • 收藏{{ item.article_collection_count }}
          </p>
          <!-- 文章编辑、浏览、删除 -->
          <div class="editor">
            <span @click="editor(item.article_id)">编辑</span>
            <span @click="artic_Derails(item.article_id)">浏览</span>
            <span @click="deleteDraft(item)">删除</span>
          </div>
        </div>
      </li>
      <!-- 暂无待审核博客的空状态 -->
      <el-empty description="暂无待审核博客" v-if="show"></el-empty>
    </ul>
    <div style="text-align: center" v-if="showPage">
      <!-- 页码 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalNumber * 10"
        @current-change="currentPage"
        :current-page="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入混入 时时间戳处理
import { mixin } from "../../mixin";
export default {
  name: "Audit",
  data() {
    return {
      page: 1, //页码（默认为1）
      totalNumber: 1, //总页数，默认1页
      auditBlog: [], //存待审核的博客列表
      show: true, //显示空状态
      showPage: false, //当显示空状态，隐藏页码
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  methods: {
    // 获取博客id,转入查看博客详情
    artic_Derails(id) {
      this.$router.push({
        name: "BlogDetails",
        query: {
          itemid: id,
        },
      });
    },
    // 获取博客id,转入编辑博客
    editor(id) {
      this.$router.push({
        name: "WriteBlog",
        query: {
          id: id,
        },
      });
    },
    //点击删除博客
    deleteDraft(item) {
      this.$confirm("此操作将永久删除该此草稿, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            method: "post",
            url: "article/deleteToreCycleBin",
            params: {
              article_id: item.article_id,
              uid: this.$store.getters.getLoginxMessage.uid,
            },
          }).then(({ data }) => {
            if (data.flag) {
              this.switch_page(); // 更新待审核的博客
              this.$message.success("文章删除成功!");
            } else {
              this.$message.warning("文章删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 切换后页码
    currentPage(val) {
      this.page = val;
      this.switch_page(); //查看待审核的博客
    },
    // 查看待审核的博客
    switch_page() {
      this.$http({
        method: "post",
        url: "search/viewTheBlogUnderReview",
        params: {
          pageNum: this.page, //当前页码
          pageSize: 10, //当前页码的最大显示条数
          uid: JSON.parse(sessionStorage.getItem("LoginMessage")).message.uid, //用户的id
        },
      }).then(({ data }) => {
        this.auditBlog = []; //清空博客列表
        if (data.flag) {
          this.show = false; //隐藏空状态
          this.showPage = true; //显示页码
          this.auditBlog = data.data[0].list; //获取博客列表
          this.totalNumber = data.data[0].pages; //获取总页数
          for (let i = 0; i < this.auditBlog.length; i++) {
            // 判断是否有图片，有则显示无则隐藏
            if (this.auditBlog[i].article_picture) {
              this.$set(this.auditBlog[i], "display", true);
            } else {
              this.$set(this.auditBlog[i], "display", false);
            }
            // 判断博客类型 原创or转载
            if (this.auditBlog[i].original_or_reprint) {
              this.$set(this.auditBlog[i], "original_or_reprint", "原创");
            } else {
              this.$set(this.auditBlog[i], "original_or_reprint", "转载");
            }
          }
        } else {
          this.show = true; //显示空状态
          this.showPage = false; //隐藏页码
        }
      });
    },
  },
  mounted() {
    this.switch_page(); //查看待审核的博客
  },
};
</script>

<style scoped lang='less'>
li {
  padding: 15px;
  display: flex;
  position: relative;
  border-bottom: 1px solid rgb(234, 235, 235);
}
li a {
  flex: 2;
}
li > div {
  flex: 9;
}
/* 文章封面 */
img {
  width: 150px;
  height: 100px;
  vertical-align: middle;
}
/* 文章标题 */
.title {
  font-size: 20px;
  margin: 0 0 10px;
}
/* 阅读 评论 收藏 */
.read {
  margin-top: 10px;
  color: rgb(101, 101, 101);
}
/* 发布时间 */
.time {
  position: absolute;
  right: 20px;
  top: 22px;
  color: #7f8080;
}
/* 编辑 浏览 删除*/
.editor {
  position: absolute;
  right: 0;
  bottom: 15px;
}
.editor span {
  margin-right: 20px;
  cursor: pointer;
}
.editor span:hover {
  color: red;
}
/* 待审核 文章类型*/
.audit,
.type {
  display: inline-block;
  padding: 2px 5px;
  margin-right: 10px;
  font-size: 12px;
}
.audit {
  background-color: rgb(253, 195, 210);
  color: #f9233c;
}
.type {
  background-color: #bddaf7;
  color: #5f6da3;
}
</style>